<template>
  <div class="articles ptb100">
    <div class="articles_box">
      <div class="articles_search">
        <Search />
      </div>
      <div class="articles_main">
        <div class="list" v-for="item in articleList" :key="item.id">
          <ArticleListCard :data="item" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const articleList = ref([
  {
    id: "124312",
    title:
      "Node.js 是基于 Chrome V8 引擎的开源 JavaScript 运行时环境，支持事件驱动和非阻塞 I/O，适合开发高性能网络应用。它拥有丰富的 npm 生态，广泛应用于实时通信、RESTful API 和流媒体等场景，推动了 JavaScript 的全栈化发展。",
    content:
      "Node.js 是一个基于 Chrome V8 引擎的开源、跨平台 JavaScript 运行时环境，最初由 Ryan Dahl 于 2009 年创建。它通过事件驱动和非阻塞 I/O 的架构，使开发者能够构建高性能的网络应用。Node.js 不仅支持服务端开发，还可以用于构建命令行工具、桌面应用等，因而被称为“全栈 JavaScript”",
    cover_image: "https://w.wallhaven.cc/full/lq/wallhaven-lqor8y.jpg",
    views: 123,
    likes: 1,
    tag: "Node.js",
    author: "郭磊",
    created_at: "2024-07-11",
    updated_at: "2024-09-11",
  },
  {
    id: "124312",
    title: "Article 1",
    content: "This is the content of Article 1",
    cover_image: "https://w.wallhaven.cc/full/lq/wallhaven-lqor8y.jpg",
    views: 123,
    likes: 1,
    tag: "Vue",
    author: "郭磊",
    created_at: "2024-07-11",
    updated_at: "2024-09-11",
  },
]);
</script>

<style scoped lang="scss">
.articles {
  height: 100vh;
  background-color: #212121;
  .articles_box {
    margin: 0 auto;
    max-width: 1360px;
    .articles_search {
      width: 100%;
    }
    .articles_main {
      margin-top: 20px;
      width: 100%;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      .list {
        width: 23%;
      }
    }
  }
}
</style>
